import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { MonitorCollection } from '../api/monitor';
import dayjs from 'dayjs'
import * as _ from 'lodash'


const Status = ({value}) => {
    if (_.isString(value)) {
        return <span style={{color: 'green'}}>{value}</span>
    }
    if (value) {
        return <span style={{color: 'green'}}>正常</span>
    } else {
        return <span style={{color: 'red'}}>异常</span>
    }

}

export const Monitor = () => {
  const monitors = useTracker(() => {
    return MonitorCollection.find().fetch();
  });

  return (
    <div>
      <h2>monitors</h2>
      <ul>{monitors.map(
        monitor => <li key={monitor._id}>
            <div>
                <span> {dayjs(monitor.t).format('YYMMDD-HH:mm')}</span>
                <span> {monitor.key}</span>
                <span><Status value={monitor.value}/></span>
            </div>
        </li>
      )}</ul>
    </div>
  );
};
